<script setup>
import { reactive, ref, watch } from 'vue'
import { showMessage } from '@/public/public'

const formLabelWidth = '100px'


const disabledInput = ref(false);
const props = defineProps({ curData:{}, dialogFormDetailsAgree: {}})
const emits = defineEmits(["isShowAgree", 'modifyData']);
const dFVisible = ref(props.dialogFormDetailsAgree);
const applyData = reactive({});


watch(() => [props.dialogFormDetailsAgree, props.curData], ([visableVal, dataVal], [visablePreVal, dataPreVal]) => {
    dFVisible.value = visableVal;
        applyData.applyId = dataVal.applyId;
})



// 0审批中 1已通过 2已拒绝
function cancel() {
    if (!applyData.approveRemark) {
            showMessage('请添加备注', 'error', 2000);
            return;
        }
        applyData.approveRemark = applyData.approveRemark;
    applyData.approveState = 2;
    applyData.applyId = applyData.applyId;
    emits("modifyData", applyData);
   
    dFVisible.value = false;
    emits("isShowAgree", false);
}


function save() {

    if (!applyData.approveRemark) {
            showMessage('请添加备注', 'error', 2000);
            return;
        }
        applyData.approveRemark = applyData.approveRemark;
        applyData.approveState = 1;
        applyData.applyId = applyData.applyId;

        emits("modifyData", applyData);

        dFVisible.value = false;
    emits("isShowAgree", false);
    
}
// 点击空白，点击右上角x，按键盘esc键
function close() {
    applyData.approveRemark = '';
    applyData.applyId = '';
    emits("isShowAgree", false);
}


</script>

<template>
    <el-dialog v-model="dFVisible" title="审批意见" :before-close="close" style="width:400px;">
        <el-form :model="applyData">
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="applyData.approveRemark" autocomplete="off" :disabled="disabledInput"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="save" class="saveapplycolor">同意</el-button>
                <el-button @click="cancel" class="cancelapplycolor">拒绝</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.el-input {
    width: 230px;
}
.dialog-footer button:first-child {
    margin-right: 20px;
}
.dialog-footer button:last-child {
    margin-right: 20px;
}

</style>



<style>
.el-form-item__label{
    margin-left: -20px;
}

.title-primary .el-dialog__header .el-dialog__title{
    color: var(--el-color-primary);
}
.title-dark .el-dialog__header .el-dialog__title{
    color: #555;
}
.title-red .el-dialog__header .el-dialog__title{
    color: #fb4746;
}


.saveapplycolor{

    
}
.cancelapplycolor{
  
}

</style>